<template>
  <div class="head-container">
    <el-steps :space="200" align-center :active="stepIndex" process-status="process" finish-status="success">
      <el-step v-for="stepDef in stepDefs" :key="stepDef.name" :title="stepDef.name" :icon="stepDef.icon" />
    </el-steps>
  </div>
</template>
<script>
import common from '@/api/active-global'

export default {
  props: {
    parent: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      stepDefs: [
        common.StepDef.buyerAdd,
        common.StepDef.buyerEdit,
        common.StepDef.systemValidate,
        common.StepDef.auditProcess,
        common.StepDef.finish
      ]
    }
  },
  computed: {
    stepIndex: function() {
      return common.getStep(this.parent.itemStatus, this.stepDefs)
    }
  },
  methods: {
  }
}
</script>
